<template>
  <div>
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="订单号">
        <el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customerName" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="searchForm.phoneNumber" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="交易状态">
        <el-select v-model="searchForm.transactionStatus" placeholder="请选择交易状态">
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="未完成" value="未完成"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchData">查询</el-button>
      <el-button type="default" @click="resetSearch">重置</el-button>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="transactionOrders" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客户名称" width="120"></el-table-column>
      <el-table-column prop="phoneNumber" label="联系方式" width="140"></el-table-column>
      <el-table-column prop="paymentMethod" label="支付方式" width="120"></el-table-column>
      <el-table-column prop="transactionAmount" label="交易金额" width="120"></el-table-column>
      <el-table-column prop="transactionStatus" label="交易状态" width="100">
        <template #default="{ row }">
          <el-tag
              :type="row.transactionStatus === '已完成' ? 'success' : 'danger'"
          >
            {{ row.transactionStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="viewDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        layout="prev, pager, next, jumper"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
    >
    </el-pagination>

    <!-- 查看详情弹窗 -->
    <el-dialog
        title="订单详情"
        v-model="dialogVisible"
        width="600px"
    >
      <el-form label-width="120px" :model="detailData">
        <el-form-item label="订单号">
          <span>{{ detailData.orderNo }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ detailData.createTime }}</span>
        </el-form-item>
        <el-form-item label="客户名称">
          <span>{{ detailData.customerName }}</span>
        </el-form-item>
        <el-form-item label="联系方式">
          <span>{{ detailData.phoneNumber }}</span>
        </el-form-item>
        <el-form-item label="交易金额">
          <span>{{ detailData.transactionAmount }}</span>
        </el-form-item>
        <el-form-item label="支付方式">
          <span>{{ detailData.paymentMethod }}</span>
        </el-form-item>
        <el-form-item label="交易状态">
          <span>{{ detailData.transactionStatus }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span>{{ detailData.remark }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchForm: {
        orderNo: "",
        customerName: "",
        phoneNumber: "",
        transactionStatus: "",
      },
      transactionOrders: [], // 表格数据
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页大小
      total: 0, // 数据总条数
      dialogVisible: false, // 控制弹窗显示
      detailData: {}, // 详情数据
    };
  },
  methods: {
    // 获取数据
    async fetchData() {
      const params = {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      try {
        const response = await axios.post("/transactionOrders/getTransactionOrders", params); // 请求地址改为 transactionOrder
        console.log("返回数据:", response.data); // 打印返回数据
        const { records, total, current, size } = response.data; // 解构返回数据
        this.transactionOrders = records;
        this.total = total;
        this.pageNum = current;
        this.pageSize = size;
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    // 重置搜索条件
    resetSearch() {
      this.searchForm = {
        orderNo: "",
        customerName: "",
        phoneNumber: "",
        transactionStatus: "",
      };
      this.fetchData();
    },
    // 分页改变
    handlePageChange(page) {
      this.pageNum = page;
      this.fetchData();
    },
    // 查看详情
    async viewDetail(row) {
      try {
        const response = await axios.get(`/transactionOrders/findTransactionOrderById/${row.id}`);
        this.detailData = response.data; // 设置详情数据
        this.dialogVisible = true; // 显示弹窗
      } catch (error) {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败");
      }
    },
  },
  mounted() {
    this.fetchData(); // 页面加载时获取数据
  },
};
</script>

<style>
.search-form {
  margin-bottom: 20px;
}
</style>
